import { DrawerForm } from "@ant-design/pro-components";
import {
  ProFormText,
  ProFormSelect,
  ProFormDigit,
  ProFormTextArea,
  ProFormUploadDragger,
  ProForm,
} from "@ant-design/pro-components";
import { Button, message } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { saveFaceLibrary } from "@/services/api/api-face-library";

interface FaceInputFormProps {
  onSuccess?: () => void;
}

const FaceInputForm: React.FC<FaceInputFormProps> = ({ onSuccess }) => {
  const [form] = ProForm.useForm();

  const onFinish = async (values: any) => {
    try {
      const formData = new FormData();

      // 添加普通字段
      formData.append('name', values.name);
      formData.append('gender', values.gender);
      formData.append('age', values.age);
      formData.append('type', values.type);
      if (values.description) {
        formData.append('description', values.description);
      }

      // 添加图片文件
      if (values.image && values.image.length > 0) {
        formData.append('image', values.image[0].originFileObj);
      }

      const res = await saveFaceLibrary(formData);
      message.success("人脸信息录入成功");
      form.resetFields();
      onSuccess?.();
      return true;
    } catch (error) {
      message.error("录入失败，请重试");
      return false;
    }
  };

  return (
    <DrawerForm
      title="录入人脸信息"
      width={600}
      trigger={<Button type="primary">录入人脸</Button>}
      form={form}
      onFinish={onFinish}
      autoFocusFirstInput
      submitter={{
        searchConfig: {
          submitText: "提交",
          resetText: "重置",
        },
      }}
    >
      <ProFormText
        name="name"
        label="姓名"
        placeholder="请输入姓名"
        rules={[{ required: true, message: "请输入姓名" }]}
        width="md"
      />

      <ProFormSelect
        name="gender"
        label="性别"
        placeholder="请选择性别"
        options={[
          { value: "male", label: "男" },
          { value: "female", label: "女" },
        ]}
        width="sm"
      />

      {/* <ProFormDigit
        name="age"
        label="年龄"
        placeholder="请输入年龄"
        rules={[{ required: true, message: "请输入年龄" }]}
        min={1}
        max={120}
        fieldProps={{ precision: 0 }}
        width="xs"
      /> */}
      <ProFormSelect
        name="type"
        label="人脸类型"
        valueEnum={{
          black: "黑名单",
          white: "白名单",
        }}
        initialValue="white"
      />
      <ProFormTextArea
        name="description"
        label="描述"
        placeholder="请输入描述信息"
        fieldProps={{
          autoSize: {
            minRows: 3,
            maxRows: 5,
          },
        }}
        width="xl"
      />

      <ProForm.Item
        name="image"
        label="人脸照片"
        valuePropName="fileList"
        rules={[{ required: true, message: "请上传人脸照片" }]}
        getValueFromEvent={(e) => {
          if (Array.isArray(e)) {
            return e;
          }
          return e?.fileList;
        }}
      >
        <ProFormUploadDragger
          max={1}
          accept="image/*"
          listType="picture-card"
          fieldProps={{
            beforeUpload: () => false, // Prevent auto upload
          }}
        >
          <div>
            <UploadOutlined style={{ fontSize: '24px' }} />
            <div style={{ marginTop: 8 }}>点击或拖拽上传人脸照片</div>
          </div>
        </ProFormUploadDragger>
      </ProForm.Item>
    </DrawerForm>
  );
};

export default FaceInputForm;
